<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天猫tmall.com--理想生活上天猫</title>
  <script src="./js/item.js" type="module"></script>
  <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./styles/PCcommon.css">
  <link rel="stylesheet" href="./styles/detail.css">
  <link rel="stylesheet" href="./styles/magnifier.css">
  <link rel="stylesheet" href="./js/swiper-7.4.1/swiper/swiper-bundle.min.css">
  <script src="./js/swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
  
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="center">
      <div class="left" style="height: 27px;">
        <a href="#"><span class="glyphicon glyphicon-home" style="color:red"></span>天猫首页</a>
        <span class="text">喵，欢迎来天猫</span>
        <a href="./login.html">请登录</a>
        <a href="./register.html">免费注册</a>
      </div>
      <div class="cen">
        <div class="show1">
          <a href="#">我的淘宝<span class="glyphicon glyphicon-triangle-bottom trigon"></span></a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">已买到的宝贝</a>
              </li>
              <li>
                <a href="#">已卖出的宝贝</a>
              </li>
            </ul>
          </div>
        </div> 
        <a href="./shopping.html"><span class="glyphicon glyphicon-shopping-cart" style="color:red"></span>购物车</a>
        <div class="show2">
          <a href="#">收藏夹<span class="glyphicon glyphicon-triangle-bottom trigon"></span>
          </a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">收藏的宝贝</a>
              </li>
              <li>
                <a href="#">收藏的店铺</a>
              </li>
            </ul>
          </div>
        </div>
        <span>|</span>
      </div>
      <div class="right">
        <div class="show1">
          <a href="#"><span class="glyphicon glyphicon-phone" style="color: red;"></span>手机版</a>
          <div><img src="./img/ma.jpg" alt=""></div>
        </div>
        <a href="#">淘宝网</a>
        <a href="#">网页无障碍</a>
        <div class="show2">
          <a href="#">商家支持<span class="glyphicon glyphicon-triangle-bottom trigon"></span></a>
          <div>
            <h5>商家：</h5>
            <ul>
              <li>
                <a href="#">商家中心</a>
              </li>
              <li>
                <a href="#">天猫规则</a>
              </li>
              <li>
                <a href="#">商家入驻</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
              <li>
                <a href="#">运营服务</a>
              </li>
            </ul>
            <h5>帮助：</h5>
            <ul>
              </li>
              <h3>------------</h3>
              <li>
                <a href="#">商家服务大厅</a>
              </li>
              <li>
                <a href="#">问商友</a>
              </li>
            </ul>
          </div>
        </div>
        <a href="#">商家中心</a>
      </div>
    </div>
  </header>

  <!-- 搜索框 -->
  <div class="search">
    <div class="center">
      <div class="left">
        <div class="search-img">
          <a href="#">
            <img src="./img/detail/detail1.png" alt="" style="width: 140px;">
          </a>
        </div>

        <div class="show1">
          <div class="show1-box1">
            <!-- 店铺名 -->
            <div class="search-shopname">
              <a href="#">华为官方旗舰店
                <img src="./img/detail/detail2.png" alt="">
              </a>
            </div>

            <!-- 店铺描述 -->
            <div class="search-describe">
              <div class="content">
                <div class="text">
                  描 述 服 务 物 流
                </div>
                <div class="num">
                  4.8 - 4.8 - 4.8
                  <span class="glyphicon glyphicon-arrow-up" style="color: red;"></span>
                </div>
              </div>

            </div>

            <div class="open">
              <a href="#">
                <span class="glyphicon glyphicon-triangle-bottom trigon"></span>
              </a>
            </div>
          </div>

          <div class="show1-box">
            <div class="show1-box-top">
              <p>店铺动态评分&emsp;&emsp;&emsp;&emsp;与同行业相比</p>

              <li>描述相符： <a href="#"><span title="4.83912">4.8</span>&emsp;&emsp;&emsp;<span
                    class="glyphicon glyphicon-minus trigon4" style="color: red; padding-right: 4px;"></span>持平<span>
                    --------</span></a></li>
              <li>服务态度： <a href="#"><span title="4.86119">4.8</span>&emsp;&emsp;&emsp;<span
                    class="glyphicon glyphicon-minus trigon4" style="color: red; padding-right: 4px;"></span>持平<span>
                    --------</span></li>
              <li>物流服务： <a href="#"><span title="4.89726">4.8</span>&emsp;&emsp;&emsp;<span
                    class="glyphicon glyphicon-arrow-up trigon4" style="color: red; padding-right: 4px;"></span>高于<span>
                    9.75%</span></a></li>
              </ul>
            </div>
            <div class="show1-box-mid">
              <p>店铺服务</p>
              <ul>
                <li>掌&emsp;&emsp;柜 : <a href="#">华为官方旗舰店</a></li>
                <li>客&emsp;&emsp;服 : <a href="#"><img src="./img/detail/detail2.png" alt=""
                      style="width: 20px; display: inline-block;"></a></li>
                <li>开店时长 : <a href="#"><img src="./img/detail/detail7.png" alt=""
                      style="width: 100px; height: 20px; display: inline-block;"></a></li>
                <li>所在地 : 北京</li>
                <li>企业资质 : <a href="#"><img src="./img/detail/detail8.png" alt=""
                      style="width: 25px; height: 25px; display: inline-block;"></a></li>
              </ul>
            </div>
            <div class="show1-box-buttom">
              <div class="trigon2">
                <a href="#"><span class="glyphicon glyphicon-gift">进店逛逛</span></a>
              </div>
              <div class="trigon3">
                <a href="#"><span class="glyphicon glyphicon-star">收藏本店</span></a>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="right">
        <div class="right-text">
          <input type="text" placeholder="搜索 天猫 商品/品牌/店铺" title="请输入搜索文字">
          <button type="submit" class="button1">搜天猫</button>
          <button type="submit" class="button2">搜本店</button>
        </div>
      </div>
    </div>
  </div>

  <!-- logo部分 -->
  <div class="log">
    <img src="./img/detail/detail3.png" alt="">
    <a href="#"><img src="./img/detail/detail4.png" alt=""></a>
    <a href="#"><img src="./img/detail/detail5.png" alt=""></a>
    <a href="#"><img src="./img/detail/detail6.png" alt=""></a>
  </div>

  <!-- 导航栏 -->
  <div class="nav">
    <ul class="nav-box">
      <li class="oneli"><a href="#">全部商品分类</a></li>
      <li><a href="#">手机</a></li>
      <li><a href="#">电脑</a></li>
      <li><a href="#">平板</a></li>
      <li><a href="#">智慧屏</a></li>
      <li><a href="#">穿戴</a></li>
      <li><a href="#">耳机音箱</a></li>
      <li><a href="#">路由器</a></li>
      <li><a href="#">配件</a></li>
      <li><a href="#">智选汽车</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">华为智选</a></li>
    </ul>
  </div>

  <!-- 主体 -->
  <main>
    <div class="center">
      <!-- 主题 -->
      <div class="theme">
        <div class="theme-left">
          <div class="magnifier" id="magnifier1">
            <div class="magnifier-container">
              <div class="images-cover"></div>
              <!--当前图片显示容器-->
              <div class="move-view"></div>
              <!--跟随鼠标移动的盒子-->
            </div>
            <div class="magnifier-assembly">
              <div class="magnifier-btn">
                <span class="magnifier-btn-left">&lt;</span>
                <span class="magnifier-btn-right">&gt;</span>
              </div>
              <!--按钮组-->
              <div class="magnifier-line">
                <ul class="clearfix animation03">
                  <li>
                    <div class="small-img">
                      <img src="./img/theme/theme01.jpg" />
                    </div>
                  </li>
                  <li>
                    <div class="small-img">
                      <img src="./img/theme/theme01.jpg" />
                    </div>
                  </li>
                  <li>
                    <div class="small-img">
                      <img src="./img/theme/theme02.jpg" />
                    </div>
                  </li>
                  <li>
                    <div class="small-img">
                      <img src="./img/theme/theme03.jpg" />
                    </div>
                  </li>
                  <li>
                    <div class="small-img">
                      <img src="./img/theme/theme04.jpg" />
                    </div>
                  </li>
                </ul>
              </div>
              <!--缩略图-->
            </div>
            <div class="magnifier-view"></div>
            <!--经过放大的图片显示容器-->
          </div>
          <div class="theme-left-text">
            <div class="text1"><a href="#"><span class="glyphicon glyphicon-star"></span>收藏商品</a>（176279人气）</div>
            <a href="#">举报</a>
          </div>
        </div>
        <div class="theme-cen">
          <div class="theme-cen-top">
            <!-- 标题 -->
          <div class="title">【新品上市】华为手环7 智能手环华为手表连续血氧监测全面屏长续航运动手环智能心率监测HUAWEI NFC功能</div>
          <!-- 价格 -->
          <div class="price">价格 <span>¥ 269.00-309.00</span></div>
          </div>
          <!-- 地区 -->
          <div class="area">
            <dl>
              <dt>运费</dt>
              <dd>
                <span>杭州</span>
                <span>上城区</span>
              </dd>
            </dl>
          </div>
          <!-- 积分 -->
          <div class="integral">
            <a href="#">送天猫积分 26起</a>
          </div>
          <!-- 颜色分类 -->
          <div class="color">
            <span>颜色分类</span>
            <ul>
              <li>
                <a href="#"><img src="./img/theme/theme06.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
              <li>
                <a href="#"><img src="./img/theme/theme07.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
              <li>
                <a href="#"><img src="./img/theme/theme08.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
              <li>
                <a href="#"><img src="./img/theme/theme09.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
              <li>
                <a href="#"><img src="./img/theme/theme06.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
              <li>
                <a href="#"><img src="./img/theme/theme07.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
              <li>
                <a href="#"><img src="./img/theme/theme08.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
              <li>
                <a href="#"><img src="./img/theme/theme09.jpg" alt="" style="width:38px; height: 38px;"></a>
              </li>
            </ul>
          </div>
          <!-- 数量选择 -->
          <div class="quantity">
            <span>数量</span>
            <input type="number" value="1" id="num">
            <div class="btn">
              <button class="glyphicon glyphicon-chevron-up"></button>
              <button class="glyphicon glyphicon-chevron-down"></button>
            </div>
            <span>件</span>
          </div>
          <!-- 立即购买 -->
          <div class="buynow">
            <button type="submit" class="btn1">立即购买</button>
            <button type="submit" class="btn2" id="additem"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button>
          </div>
          <!-- 服务承诺 -->
          <div class="promise">
            <span>服务承诺</span>
            <div class="promise-left">
              <a href="#">正品保证</a>
              <a href="#">极速退款</a>
              <a href="#">退货运费险</a><br>
              <a href="#">七天无理由退换</a>
            </div>
            <div class="promise-right">
              支付方式
            </div>
          </div>
        </div>
        <div class="theme-right">
          <div class="swiper">
            <div class="see-more">
              <s>——————</s>
              <span>看了又看</span>
              <s>——————</s>
            </div>
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./img/theme/theme10.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme11.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme12.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme13.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme14.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme15.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme10.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme11.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme12.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme13.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme14.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
              <div class="swiper-slide"><img src="./img/theme/theme15.jpg" alt="">
                <div class="text">￥1398</div>
              </div>
            </div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

          </div>
        </div>
      </div>
      <!-- 定位条 -->
      <div class="position" id="navbg">
        <div class="position-left">
          <a href="#">华为官方旗舰店<img src="./img/detail/detail2.png" alt=""></a>
          <div class="symbol">
            <span class="glyphicon glyphicon-triangle-bottom"></span>
          </div>
        </div>
        <div class="position-cen">
          <!-- 商品 -->
          <div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                  data-toggle="tab">商品详情</a>
              </li>
              <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                  data-toggle="tab">评&nbsp;价</a></li>
            </ul>
          </div>
          <div class="phone-buy">
            <a href="#">手机购买
              <span class="glyphicon glyphicon-qrcode"></span>
              <span class="glyphicon glyphicon-triangle-bottom triangle"></span>
            </a>
            <div class="show1">
              <a href="#"><img src="./img/theme/erweima.png" alt=""></a>
            </div>
          </div>
        </div>
        <div class="position-right">
          <button type="submit" class="position-btn"><span
              class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button>
        </div>
      </div>
      <!-- 商品介绍 -->
      <div class="content">

        <div class="content-left">
          <!-- 店铺 -->
          <div class="store">
            <!-- 认证 -->
            <div class="authentication">
              <span>7</span>
              天猫七年店
            </div>
            <!-- 店铺描述 -->
            <div class="store-describe">
              <!-- <div class="store-content"> -->
              <div class="text">
                描 述 服 务 物 流
              </div>
              <div class="num">
                4.8 - 4.8 - 4.8
                <span class="glyphicon glyphicon-arrow-up" style="color: red;"></span>
              </div>
              <!-- </div> -->

            </div>
            <!-- 按钮 -->
            <div class="store-btn">
              <button type="submit" class="store-btn1">进店逛逛</button>
              <button type="submit" class="store-btn2">收藏店铺</button>
            </div>
          </div>
          <!-- 客服中心 -->
          <div class="customer-service">
            <div class="title">
              <div class="glyphicon glyphicon-chevron-right trigon"></div>
              客服中心
            </div>
            <div class="worktime">
              <h3>工作时间</h3>
              <p>周一至周日：0:00-24:00</p>
            </div>
            <!-- 咨询 -->
            <div class="consulting">
              <h3>在线咨询</h3>
              <div class="consulting-buttom">
                <span>客服中心</span>
                <a href="#"><img src="./img/detail/T1uUG.XjtkXXcb2gzo-77-19.gif" alt=""></a>
              </div>
            </div>
          </div>
          <!-- 热销排行 -->
          <div class="hot-sale">
            <div class="title">
              <div class="glyphicon glyphicon-chevron-right trigon"></div>
              TOP 热销排行
            </div>
            <div class="text">
              <a href="#">
                <li>
                  <span class="glyphicon glyphicon-italic" style="color: red;"></span>
                  华为FreeBuds P...
                </li>
              </a>
            </div>
            <div class="photo">
              <a href="#">
                <img src="./img/detail/picture05.jpg" alt="">
              </a>
              <ul>
                <li>￥899.00</li>
                <li>现价：<span>649.00</span></li>
                <li>已售出<span> 156963 </span>件</li>
              </ul>
            </div>
          </div>
          <!-- 图片1 -->
          <div class="picture">
            <figure>
              <a href="#"><img src="./img/detail/picture01.jpg" alt=""></a>
            </figure>
            <figure>
              <a href="#"><img src="./img/detail/picture02.jpg" alt=""></a>
            </figure>
            <figure>
              <a href="#"><img src="./img/detail/picture03.jpg" alt=""></a>
            </figure>
            <figure>
              <a href="#"><img src="./img/detail/picture04.jpg" alt=""></a>
            </figure>
          </div>
        </div>

        <div class="content-cen">
          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
              <!-- 产品参数 -->

              <div class="parameters">
                <div class="text-top">
                  品牌名称： Huawei/华为
                </div>
                <div class="text-mid">
                  产品参数：
                </div>
                <div class="text-buttom">
                  <div class="text-buttom-left">
                    <ul>
                      <li>
                        品牌: Huawei/华为
                      </li>
                      <li>
                        生产企业: 华为终端有限公司
                      </li>
                    </ul>
                  </div>
                  <div class="text-buttom-cen">
                    <ul>
                      <li>
                        品名: 华为手环7
                      </li>
                      <li>
                        上市时间: 2022-04-28
                      </li>
                    </ul>
                  </div>
                  <div class="text-buttom-right">
                    <ul>
                      <li class="hidden-li"
                        title="标准版-曜石黑硅胶表带 标准版-原野绿硅胶表带 标准版-星云粉硅胶表带 NFC版-原野绿硅胶表带 标准版-烈焰红硅胶表带 NFC版-烈焰红硅胶表带 NFC版-曜石黑硅胶表带 NFC版-星云粉硅胶表带">
                        颜色分类：标准版-曜石黑硅胶表带 标准版-原野绿硅胶表带 标准版-星云粉硅胶表带 NFC版-原野绿硅胶表带 标准版-烈焰红硅胶表带 NFC版-烈焰红硅胶表带 NFC版-曜石黑硅胶表带
                        NFC版-星云粉硅胶表带
                      </li>
                      <li>
                        保修期: 12个月
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="content-cen-picture">
                <div>
                  <!-- <img src="./img/detail/huawei01.jpg" alt="">
                <img src="./img/detail/huawei02.jpg" alt="">
                <img src="./img/detail/huawei03.jpg" alt="">
                <img src="./img/detail/huawei04.jpg" alt="">
                <img src="./img/detail/huawei05.jpg" alt="">
                <img src="./img/detail/huawei06.jpg" alt="">
                <img src="./img/detail/huawei07.jpg" alt="">
                <img src="./img/detail/huawei08.jpg" alt="">
                <img src="./img/detail/huawei09.jpg" alt="">
                <img src="./img/detail/huawei10.jpg" alt="">
                <img src="./img/detail/huawei11.jpg" alt="">
                <img src="./img/detail/huawei12.jpg" alt="">
                <img src="./img/detail/huawei13.jpg" alt="">
                <img src="./img/detail/huawei14.png" alt="" style="width:790px;"> -->
                </div>
              </div>

            </div>

            <div role="tabpanel" class="tab-pane" id="profile">
              <!-- 评价 -->
              <div class="evaluate">
                <div class="grade">
                  <div class="grade1">
                    <span>与描述相符</span>
                    <span style="font-size: 32px; color:#ff6600;">4.8</span><br>
                    <span style="color: gold;"><span class="glyphicon glyphicon-star"></span><span
                        class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span
                        class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span></span>
                  </div>
                  <span>大家都写到</span>
                  <div class="grade2">
                    <a href="#">没有不适感(14)</a>
                    <a href="#">检测精准(10)</a>
                    <a href="#">用途很大(6)</a>
                    <a href="#">新款很柔软(5)</a>
                    <a href="#">图片很好(5)</a>
                    <a href="#">细节处理太差(2)</a>
                  </div>
                </div>

                <div class="choose">
                  <input type="radio" id="name1" name="comment"><label for="name1">全部</label>
                  <input type="radio" id="name2" name="comment"><label for="name2">追评(1123)</label>
                  <input type="radio" id="name3" name="comment"><label for="name3">图片(7166)</label>
                  <input type="checkbox" id="name4"><label for="name4">有内容</label>
                  <select name="" id="">
                    <option value="">按默认</option>
                    <option value="">按时间</option>
                  </select>
                </div>

                <div class="evaluate-picture">
                  <img src="./img/detail/huawei15.png" alt="" style="width: 790px;">
                </div>
              </div>
            </div>
          </div>


        </div>




      </div>
    </div>

  </main>

  <!-- 脚部 -->
  <footer>
    <div class="center">
      <div class="top">
        <a href="#">
          <div class="row">
            <div class="circle">优</div>
            <div class="text1">品质保障</div>
            <div class="text2">品质护航&nbsp;购物无忧</div>
          </div>
        </a>
        <a href="#">
          <div class="row">
            <div class="circle">七</div>
            <div class="text1">七天无理由退换货</div>
            <div class="text2">为您提供售后无忧保障</div>
          </div>
        </a>
        <a href="#">
          <div class="row">
            <div class="circle">特</div>
            <div class="text1">特色服务体验</div>
            <div class="text2">为您呈现不一样的服务</div>
          </div>
        </a>
        <a href="#">
          <div class="row">
            <div class="circle">帮</div>
            <div class="text1">帮助中心</div>
            <div class="text2">您的购物指南</div>
          </div>
        </a>
      </div>
      <div class="buttom">
        <div class="box">
          <h3>购物指南</h3>
          <ul>
            <li>
              <a href="#">免费注册</a>
            </li>
            <li>
              <a href="#">开通支付宝</a>
            </li>
            <li>
              <a href="#">支付宝充值</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>天猫保障</h3>
          <ul>
            <li>
              <a href="#">发票保障</a>
            </li>
            <li>
              <a href="#">售后规则</a>
            </li>
            <li>
              <a href="#">物流时效保障</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>支付方式</h3>
          <ul>
            <li>
              <a href="#">快捷支付</a>
            </li>
            <li>
              <a href="#">信用卡</a>
            </li>
            <li>
              <a href="#">余额宝</a>
            </li>
            <li>
              <a href="#">蚂蚁花呗</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>商家服务</h3>
          <ul>
            <li>
              <a href="#">天猫规则</a>
            </li>
            <li>
              <a href="#">商家入驻</a>
            </li>
            <li>
              <a href="#">商家中心</a>
            </li>
            <li>
              <a href="#">天猫必修课</a>
            </li>
            <li>
              <a href="#">喵言喵语</a>
            </li>
            <li>
              <a href="#">运营服务</a>
            </li>
          </ul>
        </div>
        <div class="box">
          <h3>手机天猫</h3>
          <a href="#"><img src="./img/erweima.png" alt="" style="width: 105px; height:105px;"></a>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>

<script src="./js/jquery.min.js"></script>
<script src="./js/magnifier.js"></script>
<script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
<!-- 放大镜 -->
<script type="text/javascript">
  $(function () {

    var magnifierConfig = {
      magnifier: "#magnifier1",//最外层的大容器
      width: 418,//承载容器宽
      height: 418,//承载容器高
      moveWidth: null,//如果设置了移动盒子的宽度，则不计算缩放比例
      zoom: 2//缩放比例
    };

    var _magnifier = magnifier(magnifierConfig);

    /*magnifier的内置函数调用*/
    /*
      //设置magnifier函数的index属性
      _magnifier.setIndex(1);
  
      //重新载入主图,根据magnifier函数的index属性
      _magnifier.eqImg();
    */
  });
</script>

<!-- 垂直轮播图 -->
<script>
  var mySwiper = new Swiper('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    slidesPerView: 3,
    centeredSlides: true,
    centeredSlidesBounds: true,
    slidesPerGroup: 3,
    spaceBetween: 0,

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  })


</script>

<!-- 粘性定位 -->
<script>
  $(document).bind('scroll', (e) => {
    if (window.scrollY >= 880) {
      $('.position').css('position', 'fixed')
    } else {
      $('.position').css('position', 'relative')
    }
  })

</script>

<!-- 选项卡修改样式 -->
<script>
  $(function(){
    $
  })
</script>